<!DOCTYPE html >
<html>
<head>
    <link rel="stylesheet" href="demos.css" type="text/css" media="screen" />
    <script src="../libraries/RGraph.common.core.js" ></script>
    <script src="../libraries/RGraph.common.dynamic.js" ></script>
    <script src="../libraries/RGraph.common.tooltips.js" ></script>
    <script src="../libraries/RGraph.common.effects.js" ></script>
    <script src="../libraries/RGraph.common.key.js" ></script>
    <script src="../libraries/RGraph.drawing.yaxis.js" ></script>
    <script src="../libraries/RGraph.line.js" ></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <!--[if lt IE 9]><script src="../excanvas/excanvas.js"></script><![endif]-->
    
    <title>Combining more then two Line objects</title>

    <meta name="description" content="Multiple Line charts each with their own Y axis using the drawing API Y axis object" />
     
</head>
<body>

    <h1>Combining more than two Line objects with multiple Y axes</h1>
    
    <p>
        This demonstration shows how you can use the YAxis drawing API object to draw multiple axes on your chart.
    </p>

    <canvas id="cvs" width="600" height="250">[No canvas support]</canvas>
    
    <script>
        $(document).ready(function ()
        {
            var gutterLeft = 150;
            var gutterRight = 40;
            var gutterTop   = 25;

            var line1 = new RGraph.Line({
                id: 'cvs',
                data: [1,3,5,2,5,6,8,4,4,5,3,6],
                options: {
                    ymax: 10,
                    hmargin: 5,
                    gutter: {
                        right: gutterRight,
                        left: gutterLeft,
                        top: gutterTop
                    },
                    labels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
                    tooltips: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
                    colors: ['red', 'green', 'blue'],
                    key: {
                        self: ['Density', 'Speed', 'Pressure'],
                        position: {
                            self: 'gutter',
                            gutter: {
                                boxed: false
                            },
                            x: 275
                        }
                    },
                    noaxes: true,
                    ylabels: false,
                    shadow: false
                }
            }).draw()

    
            var line2 = new RGraph.Line({
                id: 'cvs',
                data: [54,53,56,58,57,53,49,52,53,56,61,58],
                options: {
                    ymax: 100,
                    background: {
                        grid: false
                    },
                    colors: ['green'],
                    hmargin: 5,
                    gutter: {
                        right: gutterRight,
                        left: gutterLeft,
                        top: gutterTop
                    },
                    tooltips: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
                    noaxes: true,
                    ylabels: false,
                    shadow: false
                }
            }).draw()
    
            var line3 = new RGraph.Line({
                id: 'cvs',
                data: [31,35,32,36,34,32,33,35,28,17,18,18],
                options: {
                    ymax: 50,
                    background: {
                        grid: false
                    },
                    ylabels: false,
                    colors: ['blue'],
                    hmargin: 5,
                    gutter: {
                        right: gutterRight,
                        left: gutterLeft,
                        top: gutterTop
                    },
                    tooltips: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
                    noaxes: true,
                    shadow: false
                }
            }).draw()
    
    
    
            /**
            * This draws the extra axes. It's run whenever the line3 object is drawn
            */
            yaxis1 = new RGraph.Drawing.YAxis({
                id: 'cvs',
                x: 150,
                options: {
                    colors: 'red',
                    text: {
                        color: 'red'
                    },
                    max: 10,
                    title: 'Density'
                }
            }).draw()

            yaxis2 = new RGraph.Drawing.YAxis({
                id: 'cvs',
                x: 100,
                options: {
                    colors: 'green',
                    text: {
                        color: 'green'
                    },
                    max: 100,
                    title: 'Speed'
                }
            }).draw()

            yaxis3 = new RGraph.Drawing.YAxis({
                id: 'cvs',
                x: 50,
                options: {
                    colors: 'blue',
                    text: {
                        color: 'blue'
                    },
                    max: 30,
                    title: 'Pressure'
                }
            }).draw()
        })
    </script>

    <p>
        <a href="./">&laquo; Back</a>
    </p>

</body>
</html>